// 任务列表组件
import React from 'react';
import { Table, Tag, Space, Button, Progress } from 'antd';
import { PlayCircleOutlined, PauseOutlined, DeleteOutlined } from '@ant-design/icons';
import type { Job } from '../types';
import { formatDateTime } from '../utils/fileUtils';

interface JobListProps {
  jobs: Job[];
  loading: boolean;
  onEdit: (job: Job) => void;
  onRun: (job: Job) => void;
  onStop: (jobId: string) => void;
  onDelete: (jobId: string) => void;
  onSelect?: (job: Job) => void;
  selectedJobId?: string;
}

const JobList: React.FC<JobListProps> = ({
  jobs,
  loading,
  onEdit,
  onRun,
  onStop,
  onDelete,
  onSelect,
  selectedJobId
}) => {
  // 添加选中行样式的CSS
  const selectedRowStyle = `
    .selected-row {
      background-color: #e6f7ff;
    }
    
    .selected-row:hover {
      background-color: #e6f7ff !important;
    }
  `;
  // 获取状态标签颜色
  const getStatusColor = (status: Job['status']) => {
    switch (status) {
      case 'pending':
        return 'default';
      case 'running':
        return 'processing';
      case 'completed':
        return 'success';
      case 'failed':
        return 'error';
      case 'stopped':
        return 'warning';
      default:
        return 'default';
    }
  };

  // 获取状态文本
  const getStatusText = (status: Job['status']) => {
    switch (status) {
      case 'pending':
        return '待执行';
      case 'running':
        return '运行中';
      case 'completed':
        return '已完成';
      case 'failed':
        return '失败';
      case 'stopped':
        return '已停止';
      default:
        return status;
    }
  };

  return (
    <>
      <style>{selectedRowStyle}</style>
      <Table
      dataSource={jobs}
      columns={[
        {
          title: '任务名称',
          dataIndex: 'name',
          key: 'name',
          render: (text: string, record: Job) => (
            <Button 
              type={selectedJobId === record.id ? "link" : "text"} 
              onClick={() => onSelect?.(record)}
              style={{ 
                textAlign: 'left', 
                fontWeight: selectedJobId === record.id ? 'bold' : 'normal',
                color: selectedJobId === record.id ? '#1890ff' : 'inherit'
              }}
            >
              {text}
            </Button>
          )
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          render: (status: string) => {
            const statusMap: Record<string, { color: string; text: string }> = {
              pending: { color: 'default', text: '待执行' },
              running: { color: 'processing', text: '运行中' },
              completed: { color: 'success', text: '已完成' },
              failed: { color: 'error', text: '失败' },
              stopped: { color: 'warning', text: '已停止' }
            };
            const statusInfo = statusMap[status] || statusMap.pending;
            return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
          },
        },
        {
          title: '模型类型',
          dataIndex: ['modelConfig', 'modelType'],
          key: 'modelType',
        },
        {
          title: '创建时间',
          dataIndex: 'createdAt',
          key: 'createdAt',
          render: (date: string) => formatDateTime(date),
        },
        {
          title: '操作',
          key: 'action',
          render: (_: any, record: Job) => (
            <Space size="middle">
              <Button type="link" onClick={() => onEdit(record)}>编辑</Button>
              {record.status === 'pending' && (
                <Button 
                  type="link" 
                  icon={<PlayCircleOutlined />} 
                  onClick={() => onRun(record)}
                >
                  运行
                </Button>
              )}
              {record.status === 'running' && (
                <Button 
                  type="link" 
                  danger 
                  icon={<PauseOutlined />} 
                  onClick={() => onStop(record.id)}
                >
                  停止
                </Button>
              )}
              <Button type="link" danger icon={<DeleteOutlined />} onClick={() => onDelete(record.id)}>删除</Button>
            </Space>
          ),
        },
      ]}
      rowKey="id"
      loading={loading}
      pagination={{ pageSize: 10 }}
      rowClassName={(record) => selectedJobId === record.id ? 'selected-row' : ''}
    />
    </>
  );
};

export default JobList;